<template>
  <div class="box-rtsp" id="domparent">
    <div :id="'playWnd' + randoms" class="playWnd"></div>
  </div>
</template>


<script setup>
import { onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import emitter from "@/utils/mitt";
const props = defineProps({
  vid: Array,
  width: {
    type: Number,
    default: 640,
  },
  height: {
    type: Number,
    default: 310,
  },
  showToolbar: {
    type: Number,
    default: 1,
  },
  currentIndex: Number,
  showSmart: {
    type: Number,
    default: 1,
  },
  layout: {
    type: String,
    default: "3x3",
  },
  startTime: {
    type: String,
  },
  endTime: {
    type: String,
  },
  isback: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["choseIndex"]);

let oWebControl = null;
let pubKey = null;
let initCount = 0;

let randoms = Math.random();

// 推送消息
function cbIntegrationCallBack(oData) {
  console.log(JSON.stringify(oData.responseMsg));
  // if (oData.responseMsg.type == "1") {
  //   emit("choseIndex", props.currentIndex);
  // }
  if (oData.responseMsg.type == "1") {
    if (oData.responseMsg.msg.wndId - 1 < props.vid.length) {
      emit("choseIndex", props.vid[oData.responseMsg.msg.wndId - 1]);
    }
  }
}

//获取公钥
function getPubKey(callback) {
  oWebControl
    .JS_RequestInterface({
      funcName: "getRSAPubKey",
      argument: JSON.stringify({
        keyLength: 1024,
      }),
    })
    .then(function (oData) {
      console.log(oData);
      if (oData.responseMsg.data) {
        pubKey = oData.responseMsg.data;
        callback();
      }
    });
}

//RSA加密
function setEncrypt(value) {
  var encrypt = new JSEncrypt();
  encrypt.setPublicKey(pubKey);
  return encrypt.encrypt(value);
}

//初始化
function init() {
  getPubKey(function () {
    ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
    // var appkey = process.env.NODE_ENV == "production" ? "24976884" : "25240249"; //综合安防管理平台提供的appkey，必填
    // var secret =
    //   process.env.NODE_ENV == "production"
    //     ? setEncrypt("9zFLZBTVDGRdJ43yAaGN")
    //     : setEncrypt("vB2WwNXhhSz6UsEMC3Mg"); //综合安防管理平台提供的secret，必填
    // var ip =
    //   process.env.NODE_ENV === "production" ? "20.13.0.100" : "192.168.0.100"; //综合安防管理平台IP地址，必填
    var appkey = "24976884"; //综合安防管理平台提供的appkey，必填
    var secret = setEncrypt("9zFLZBTVDGRdJ43yAaGN"); //综合安防管理平台提供的secret，必填
    var ip = "20.13.0.100"; //综合安防管理平台IP地址，必填
    // var appkey = process.env.NODE_ENV != "production" ? "24976884" : "25240249"; //综合安防管理平台提供的appkey，必填
    // var secret =
    //   process.env.NODE_ENV != "production"
    //     ? setEncrypt("9zFLZBTVDGRdJ43yAaGN")
    //     : setEncrypt("vB2WwNXhhSz6UsEMC3Mg"); //综合安防管理平台提供的secret，必填
    // var ip =
    //   process.env.NODE_ENV != "production" ? "20.13.0.100" : "192.168.0.100"; //综合安防管理平台IP地址，必填
    // var appkey = "24976884"; //综合安防管理平台提供的appkey，必填
    // var secret = setEncrypt("9zFLZBTVDGRdJ43yAaGN"); //综合安防管理平台提供的secret，必填
    // var ip = "20.13.0.100"; //综合安防管理平台IP地址，必填
    //  var ip = "20.13.0.125"; //综合安防管理平台IP地址，必填
    var playMode = props.isback ? 1 : 0; //初始播放模式：0-预览，1-回放
    var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
    var snapDir = "D:\\SnapDir"; //抓图存储路径
    var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
    var layout = props.layout; //playMode指定模式的布局
    var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
    var encryptedFields = "secret"; //加密字段，默认加密领域为secret
    var showToolbar = props.showToolbar; //是否显示工具栏，0-不显示，非0-显示
    var showSmart = props.showSmart; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
    var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
    ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

    oWebControl
      .JS_RequestInterface({
        funcName: "init",
        argument: JSON.stringify({
          appkey: appkey, //API网关提供的appkey
          secret: secret, //API网关提供的secret
          ip: ip, //API网关IP地址
          playMode: playMode, //播放模式（决定显示预览还是回放界面）
          port: port, //端口
          snapDir: snapDir, //抓图存储路径
          videoDir: videoDir, //紧急录像或录像剪辑存储路径
          layout: layout, //布局
          enableHTTPS: enableHTTPS, //是否启用HTTPS协议
          encryptedFields: encryptedFields, //加密字段
          showToolbar: showToolbar, //是否显示工具栏
          showSmart: showSmart, //是否显示智能信息
          // buttonIDs: buttonIDs, //自定义工具条按钮
          language: "zh_CN",
          reconnectDuration: 5,
          reconnectTimes: 5,
          showSmart: 0,
          // showToolbar: 1,
          toolBarButtonIDs:
            "2048,2049,2050,2304,2306,2305,2307,2308,2309,4096,4608,4097,4099,4098,4609,4100",
          snapDir: "/home/snapShot/",
          videoDir: "home/video/",
        }),
      })
      .then(function (oData) {
        oWebControl.JS_Resize(props.width, props.height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
        // play();
        if (props.isback) {
          playBack();
        } else {
          play();
        }
      });
  });
}

// 获取当前操作系统
function detectOS() {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  const platform = navigator.platform;

  if (/Windows|Win32|Win64|WOW64|Windows NT/.test(userAgent)) {
    return "Windows";
  } else if (
    /Macintosh|MacIntel|MacPPC|Mac68K|Mac OS|MacOS/.test(userAgent) ||
    platform.startsWith("Mac")
  ) {
    return "MacOS";
  } else if (/Linux|X11|Unix/.test(userAgent) || platform.startsWith("Linux")) {
    return "Linux";
  } else if (/Android/.test(userAgent)) {
    return "Android";
  } else if (
    /iPhone|iPad|iPod/.test(userAgent) ||
    platform === "iPhone" ||
    platform === "iPad"
  ) {
    return "iOS";
  }

  return "Unknown";
}

// 创建播放实例
function initPlugin() {
  let sysTem = detectOS();
  let dom = "playWnd" + randoms;
  if (oWebControl) {
    if (props.isback) {
      playBack();
    } else {
      play();
    }

    return;
  }
  oWebControl = new WebControl({
    szPluginContainer: dom, // 指定容器id
    iServicePortStart: 15900, // 指定起止端口号，建议使用该值
    iServicePortEnd: sysTem == "Windows" ? 15900 : 15909,
    szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
    cbConnectSuccess: function () {
      // 创建WebControl实例成功
      oWebControl
        .JS_StartService("window", {
          // WebControl实例创建成功后需要启动服务
          dllPath:
            sysTem == "Windows"
              ? "./VideoPluginConnect.dll"
              : "./libVideoPluginConnect.so", // 值"./VideoPluginConnect.dll"写死
        })
        .then(
          function () {
            // 启动插件服务成功
            oWebControl.JS_SetWindowControlCallback({
              // 设置消息回调
              cbIntegrationCallBack: cbIntegrationCallBack,
            });

            oWebControl
              .JS_CreateWnd(dom, props.width, props.height)
              .then(function () {
                //JS_CreateWnd创建视频播放窗口，宽高可设定
                init(); // 创建播放实例成功后初始化
              });
          },
          function () {
            // 启动插件服务失败
            console.log("启动插件服务失败");
          }
        );
    },
    cbConnectError: function () {
      // 创建WebControl实例失败
      oWebControl = null;
      //   $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
      // ElMessage.error("插件未启动，正在尝试启动，请稍候..");
      WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
      initCount++;
      if (initCount < 3) {
        setTimeout(function () {
          initPlugin();
        }, 3000);
      } else {
        // $("#playWnd").html("插件启动失败，请检查插件是否安装！");
        // ElMessage.error("插件启动失败，请检查插件是否安装！");
      }
    },
    cbConnectClose: function (bNormalClose) {
      // 异常断开：bNormalClose = false
      // JS_Disconnect正常断开：bNormalClose = true
      console.log("cbConnectClose");
      oWebControl = null;
      //   $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
      // ElMessage.error("插件未启动，正在尝试启动，请稍候..");
      WebControl.JS_WakeUp("VideoWebPlugin://");
      initCount++;
      if (initCount < 3) {
        setTimeout(function () {
          initPlugin();
        }, 3000);
      } else {
        // $("#playWnd").html("插件启动失败，请检查插件是否安装！");
        // ElMessage.error("插件启动失败，请检查插件是否安装！");
      }
    },
  });
}
// 设置当前布局
const setLayout = () => {
  if (!oWebControl) return;
  oWebControl.JS_RequestInterface({
    funcName: "setLayout",
    argument: {
      layout: props.layout, // 窗口布局
    },
  });
  // resize();
};

// 开始播放
function play() {
  if (!oWebControl || !props.vid.length) return;
  if (oWebControl) {
    oWebControl.JS_RequestInterface({
      funcName: "stopAllPreview",
      argument: {},
    });
  }
  // var cameraIndexCode = props.vid; //获取输入的监控点编号值，必填
  var streamMode = 0; //主子码流标识：0-主码流，1-子码流
  var transMode = 1; //传输协议：0-UDP，1-TCP
  var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
  var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
  let list = [];
  for (let i = 0; i < props.vid.length; i++) {
    list.push({
      // cameraIndexCode: props.vid[i], //监控点编号
      cameraIndexCode: props.vid[i].tag, //监控点编号
      streamMode: streamMode, //主子码流标识
      transMode: transMode, //传输协议
      gpuMode: gpuMode, //是否开启GPU硬解
      wndId: i + 1, //可指定播放窗口
    });
  }
  oWebControl.JS_RequestInterface({
    funcName: "startMultiPreviewByCameraIndexCode",
    argument: {
      list,
    },
  });
}

// 开始回放
function playBack() {
  if (!oWebControl || !props.vid.length) return;
  // var cameraIndexCode = props.vid; //获取输入的监控点编号值，必填
  var streamMode = 0; //主子码流标识：0-主码流，1-子码流
  var transMode = 1; //传输协议：0-UDP，1-TCP
  var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
  var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
  let list = [];
  for (let i = 0; i < props.vid.length; i++) {
    list.push({
      // cameraIndexCode: props.vid[i], //监控点编号
      cameraIndexCode: props.vid[i].tag, //监控点编号
      startTimeStamp: Number(props.startTime) / 1000 + "", // 录像查询开始时间戳，单位：秒
      endTimeStamp: Number(props.endTime) / 1000 + "", // 录像查询结束时间戳，单位：秒
      recordLocation: Number(props.vid[i].specialUse), // 录像存储类型 0-中心存储 1-设备存储
      transMode: 1, // 传输协议 ，0-UDP 1-TCP
      gpuMode: 0, // 是否开启GPU硬解，0-不开启 1-开启
      // streamMode: streamMode, //主子码流标识
      // transMode: transMode, //传输协议
      // gpuMode: gpuMode, //是否开启GPU硬解
      wndId: i + 1, //可指定播放窗口
    });
  }
  console.log(list);
  oWebControl.JS_RequestInterface({
    funcName: "startMultiPlaybackByCameraIndexCode",
    argument: {
      list,
    },
  });
}

// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
function setWndCover() {
  let dom = "playWnd" + randoms;
  var iWidth = window.innerWidth;
  var iHeight = window.innerHeight;
  var oDivRect = document.getElementById(dom).getBoundingClientRect();

  var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
  var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
  var iCoverRight =
    oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
  var iCoverBottom =
    oDivRect.bottom - iHeight > 0 ? Math.round(oDivRect.bottom - iHeight) : 0;

  iCoverLeft = iCoverLeft > props.width ? props.width : iCoverLeft;
  iCoverTop = iCoverTop > props.height ? props.height : iCoverTop;
  iCoverRight = iCoverRight > props.width ? props.width : iCoverRight;
  iCoverBottom = iCoverBottom > props.height ? props.height : iCoverBottom;

  oWebControl.JS_RepairPartWindow(0, 0, props.width + 1, props.height); // 多1个像素点防止还原后边界缺失一个像素条
  if (iCoverLeft != 0) {
    oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, props.height);
  }
  if (iCoverTop != 0) {
    oWebControl.JS_CuttingPartWindow(0, 0, props.width + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
  }
  if (iCoverRight != 0) {
    oWebControl.JS_CuttingPartWindow(
      props.width - iCoverRight,
      0,
      iCoverRight,
      props.height
    );
  }
  if (iCoverBottom != 0) {
    oWebControl.JS_CuttingPartWindow(
      0,
      props.height - iCoverBottom,
      props.width,
      iCoverBottom
    );
  }
}

watch(
  () => props.layout,
  (newval) => {
    if (newval && newval.length > 0) {
      setLayout();
      // resize();
      // play();

      if (props.isback) {
        playBack();
      } else {
        play();
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

watch(
  () => props.vid,
  (newval) => {
    if (newval && newval.length > 0) {
      // play();
      if (props.isback) {
        playBack();
      } else {
        play();
      }
      // resize();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

function resize() {
  if (oWebControl != null) {
    let dom = document.getElementById("domparent");
    let width = 0,
      height = 0;
    if (dom) {
      width = dom.offsetWidth;
      height = dom.offsetHeight;
    }
    console.log(width, height);
    if (width && height) {
      oWebControl.JS_Resize(width, height);
    } else {
      oWebControl.JS_Resize(props.width, props.height);
    }
    setWndCover();
  }
}

onMounted(() => {
  initPlugin();
  window.addEventListener("resize", resize);
  window.addEventListener("scroll", resize);
  emitter.on("screenChange", resize);
});

function destoryPlayer() {
  if (oWebControl != null) {
    oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
    oWebControl.JS_Disconnect().then(
      function () {
        // 断开与插件服务连接成功
        console.log("断开连接成功");
      },
      function () {
        // 断开与插件服务连接失败
        console.log("断开连接失败");
      }
    );
  }
}

onUnmounted(() => {
  destoryPlayer();
  window.removeEventListener("resize", resize);
  window.removeEventListener("scroll", resize);
});

defineExpose({
  playBack,
});
</script>

<style lang="scss" scoped>
.box-rtsp {
  width: 100%;
  height: 100%;
}
.playWnd {
  width: 100%;
  height: 100%;
}
</style>
